<script lang="ts" setup>
  import { useBScroll, useState, useHomeDatas } from '@/hooks';

  import CategoryIcons from './CategoryIcons/index.vue';
  import HomeTitle from './Sub/HomeTitle.vue';
  import FoodList from './FoodList/index.vue';
  import ViewList from './ViewList/index.vue';
  import HotelList from './HotelList/index.vue';
  import KtvList from './KtvList/index.vue';
  import MassageList from './MassageList/index.vue';

  defineOptions({
    name: 'HomeScrollWrapper',
  });

  const { wrapperRef } = useBScroll();
  const [errorShow, setErrorShow] = useState(false);
  const { state, homeTitleInfo } = useHomeDatas([errorShow, setErrorShow]);
</script>

<template>
  <div class="scroll-wrapper" ref="wrapperRef">
    <div class="scroll-conetent">
      <category-icons />

      <bad-network v-if="errorShow" />
      <template v-else>
        <home-title :title="homeTitleInfo.foodTitle" />
        <food-list :foodDatas="state.foodDatas" />
        <home-title :title="homeTitleInfo.hotelTitle" />
        <hotel-list :hotelDatas="state.hotelDatas" />
        <home-title :title="homeTitleInfo.ktvTitle" />
        <ktv-list :ktvDatas="state.ktvDatas" />
        <home-title :title="homeTitleInfo.massageTitle" />
        <massage-list :massageDatas="state.massageDatas" />
        <home-title :title="homeTitleInfo.viewTitle" />
        <view-list :viewDatas="state.viewDatas" />
      </template>
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
